<template>
  <div class="dll_body">
    <div class="dll_guan">
      <van-icon
        name="arrow-left"
        style="margin-top: 5px; margin-left: 10px"
        @click="onClickLeft"
      />
      <span style="margin-left: 130px"> 意见反馈</span>
    </div>
    <div>
      <p>请填写问题描述</p>
      <van-cell-group>
        <van-field
          v-model="form.content"
          rows="5"
          type="textarea"
          maxlength="200"
          placeholder="请详细描述你的问题~"
          show-word-limit
        />
      </van-cell-group>

      <p>截图(选填)</p>
      <van-cell-group style="width: 100%; height: 115px">
        <!-- <van-uploader style="margin: 18px;" v-model="fileList" multiple :after-read="handleAfter" /> -->
        <van-uploader
          v-model:model-value="fileList"
          action="http://yourbackend/upload"
          name="img"
        />
      </van-cell-group>

      <p>联系方式(选填,便于我们联系你)</p>
      <van-cell-group>
        <van-field
          v-model="form.phone"
          rows="1"
          autosize
          type="textarea"
          placeholder="请填写电子邮箱或手机号"
        />
      </van-cell-group>
      <van-button class="dll_button" round type="success" @click="addyijian"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast, showNotify, showToast } from "vant";
import axios from "axios";

const route = useRoute();
const router = useRouter();
const onClickLeft = () => {
  router.go(-1);
};
const fileList = ref([]);
const img = ref([]);
const form = reactive({
  // content: "",
  img: [],
  // phone: ""
});
// const addyijian = async () => {
//   if (form.content === "" && form.phone === "") {
//     showFailToast('请填写完整信息');
//   } else {
//     let {data} = await axios.post("http://8.130.46.189:3000/dll/add", form );
//     if (data.code == 200) {
//       showSuccessToast('提交成功');
//       router.push("/my")
//     }
//   }
// };
const addyijian = async () => {
  // if (form.img.length !== "") {
  //   showFailToast('请填写完整信息');
  // } else {
  let { data } = await axios.post("http://8.130.46.189:3000/dll/add", form);
  if (data.code == 200) {
    showSuccessToast("提交成功");
    router.push("/my");
    //   }
  }
};
// const beforeUpload = async(file) => {
//   const formData = new FormData();
//   console.log(formData);
//   formData.append("file", file.file);
//   try {
//     const response = await axios.post("http://8.130.46.189:3000/dll/upload", formData);
//     form.img.push(response.data.urls);
//     console.log(form.img);
//   } catch (error) {
//     console.error("上传失败", error);
//   }
//       return true; // 返回 true 允许上传，返回 false 取消上传
//     };

// 假设这是你的表单对象，需要在函数外部初始化
//  const uploadFile = async (file) => {
//   const formData = new FormData();
//   formData.append('file', file);
//   try {
//     const response = await axios.post('http://8.130.46.189:3000/dll/upload', formData, {
//       headers: { 'Content-Type': 'multipart/form-data' }
//     });
//     console.log('上传成功:', response.data);
//     // 更新 fileList 或者做其他操作
//   } catch (error) {
//     console.error('上传失败:', error);
//   }
// };

// const handleChange = (changedFiles, files) => {
//   // 遍历变化的文件列表，上传每个文件
//   changedFiles.forEach((file) => {
//     if (file.status === 'finished' || file.status === 'uploading') return;
//     uploadFile(file.file);
//   });
// };
// const handleAfter = async (file) => {
//   const formData = new FormData();
//   console.log(formData);
//   formData.append("file", file.file);
//   try {
//     const response = await axios.post("http://8.130.46.189:3000/dll/upload", formData);
//     form.img.push(response.data.urls);
//     console.log(form.img);
//   } catch (error) {
//     console.error("上传失败", error);
//   }
// };

// const handleAfter = async (file) => {
//   // console.log(file.file);

//   const formData = new FormData();
//   console.log(formData);

//   formData.append("file", file.file);
//   try {
//     const response = await axios.post("http://8.130.46.189:3000/dll/upload", formData);
//     form.img.push(response.data.urls);
//     console.log(form.img);

//   } catch (error) {
//     console.error("上传失败", error);
//   }
// };
</script>

<style lang="scss" scoped>
p {
  font-size: 15px;
  padding-left: 15px;
  color: gray;
}

.dll_button {
  width: 330px;
  margin: 30px 22px;
}

.dll_body {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;

  .dll_guan {
    width: 100%;
    display: flex;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
  }

  .dll_logo {
    margin: 0 auto;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    // background-color: red;
  }
}
</style>
